<template>
  <div>
    <!-- 选择受检人 -->
    <el-form
      :model="searchForm"
      ref="searchFormRef"
      :inline="inline_status"
      label-width="80px"
      @keydown.enter="getList()"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="searchForm.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="searchForm.phone" placeholder="请输入联系方式" />
      </el-form-item>
      <el-form-item>
        <div>
          <el-button icon="Refresh" @click="handleReset">重置</el-button>
          <el-button type="primary" icon="Search" @click="handleSearch"
            >查询</el-button
          >
        </div>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      class="data-table"
      height="calc(var(--main-height) - 7rem)"
      border
    >
      <el-table-column prop="name" label="姓名" show-overflow-tooltip fixed />
      <el-table-column prop="phone" label="联系方式" show-overflow-tooltip />
      <el-table-column prop="address" label="性别" align="center">
        <template #default="{ row }">
          <el-icon v-if="row.sex == 1" class="text-[blue]"><Female /></el-icon>
          <el-icon v-else-if="row.sex == 2" class="text-[#fd9e9e]"
            ><Male
          /></el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="出生年月" min-width="120">
        <template #default="{ row }">
          {{ $initTime(row.birthday, 1) }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="status" label="建档时间">
        <template #default="{ row }">
          {{ $initTime(row.createdTime, 1) }}
        </template>
      </el-table-column> -->
      <el-table-column
        prop="occupationName"
        label="职业"
        show-overflow-tooltip
      />
      <el-table-column
        prop="workEnvName"
        label="工作环境"
        show-overflow-tooltip
      />
      <el-table-column
        prop="eyeUsageDistanceName"
        label="用眼距离"
        show-overflow-tooltip
      />
      <el-table-column prop="status" label="操作" fixed="right" width="120">
        <template #default="{ row }">
          <div class="flex flex-col justify-center">
            <el-button
              type="primary"
              class="w-full mb-1"
              @click="handleChange(row)"
              >选择</el-button
            >
            <!-- <el-button type="warning" class="w-full">编辑</el-button> -->
          </div>
        </template>
      </el-table-column>

      <template #empty>
        <span>未查询到客户信息</span>
      </template>
    </el-table>
    <PagingQuery
      :page="page"
      :pageSize="pageSize"
      :total="total"
      @getList="getList"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PagingQuery from "@/components/PagingQuery.vue";
import { handleApiResponse } from "@/utils/request.js";
import { GetRelativesByQuery } from "../../wailsjs/go/api/CustomerApi.js";
import { useUserStore } from "@/pinia";
import { cloneDeep } from "lodash";

onMounted(() => {
  handleResize();
  getList();
});
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
const handleResize = () => {
  if (window.innerWidth <= 1420) {
    inline_status.value = false;
  } else {
    inline_status.value = true;
  }
};

const emit = defineEmits(["handleBack"]);
const props = defineProps({
  type: {
    type: Number, // 1.检查模式选择客户  2.管理模式选择客户
    default: 1,
  },
});

const userStore = useUserStore();

const searchFormRef = ref(null);
const searchForm = ref({
  name: "",
  phone: "",
});

const handleSearch = () => {
  getList();
};
const handleReset = () => {
  searchFormRef.value.resetFields();
  getList();
};

const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);

const getList = (val) => {
  if (val) {
    page.value = val.page;
    pageSize.value = val.pageSize;
  }

  handleApiResponse(() =>
    GetRelativesByQuery({
      page: page.value,
      pageSize: pageSize.value,
      name: searchForm.value.name,
      phone: searchForm.value.phone,
    })
  ).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
};

// 选择客户
const handleChange = (row) => {
  // console.log(row);
  if (props.type == 1) {
    let {
      id,
      customerId,
      name,
      phone,
      sex,
      birthday,
      occupationName,
      eyeUsageDistanceName,
      workEnvName,
      headUrl,
    } = cloneDeep(row);
    userStore.updateCustomerInfo({
      id: id,
      customerId: customerId,
      customerName: name,
      customerTel: phone,
      sex: sex,
      birthday: birthday,
      occupationName: occupationName,
      eyeUsageDistanceName: eyeUsageDistanceName,
      workEnvName: workEnvName,
      headUrl: headUrl,
    });
    userStore.updateIsSelectCustomer(2);
  }
  emit("handleBack", row);
};

const inline_status = ref(true);
window.addEventListener("resize", () => {
  if (window.innerWidth <= 1420) {
    inline_status.value = false;
  } else {
    inline_status.value = true;
  }
});
</script>

<style scoped lang="scss">
.data-table .el-button + .el-button {
  margin-left: 0;
}
</style>